<template>
  <div>
    <el-form :model="formList" ref="form" size="normal" label-position="left" label-width="100px" class="center">
      <el-row :gutter="20">
        <el-col :span="10" :offset="0">
          <el-form-item label="编码模块">
            <el-select v-model="formList.module" value-key="module" placeholder="" clearable @change="getApi"
              class="wid">
              <el-option v-for="item in moduleType" :key="item.center_code" :label="item.label"
                :value="item.center_code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="0">
          <el-form-item label="接口链接">
            <el-input v-model="formList.apiName" placeholder="" size="normal" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="0">
          <div class="right">
            <el-button type="primary" size="medium" @click="getName" :loading="loading">搜索</el-button>
            <el-button type="primary" size="medium" @click="save">暂存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-table :data="apiNot" border stripe height="400px" @cell-dblclick="cellAdd" v-loading="loading">
          <el-table-column label="待选接口">
            <template slot-scope="{row}">
              {{row.name}}-{{row.id}}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-table :data="apiHave" border stripe height="400px" @cell-dblclick="cellRemove">
          <el-table-column label="已选接口">
            <template slot-scope="{row}">
              {{row.name}}-{{row.id}}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  props: {
    permissionType: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      loading: false,
      formList: {},
      moduleType: [],
      // 全部api
      apiAll: [],
      // 未选api
      apiNot: [],
      // 已选api
      apiHave: [],
      apiCheck: [],
    }
  },
  created () {

  },
  mounted () {
    this.init()
    this.permissionType.forEach(item => {
      this.apiHave.push(item)
      this.apiCheck[item.id] = item
    })
  },
  methods: {
    // 查询接口模块
    async init () {
      const res = await this.$http('sysDict', {
        type: "sys_center_type"
      })
      this.moduleType = res
    },
    // 获取待选接口
    async getApi () {
      this.loading = true
      const res = await this.$http('sysModuleApi', {
        center_code: this.formList.module
      })
      // 重置信息
      this.apiAll = []
      this.apiNot = []
      // 如果现有接口没有，添加进
      res.forEach(item => {
        if (!this.apiCheck[item.id]) {
          this.apiAll.push(item)
          this.apiNot.push(item)
        }
      })
      this.loading = false
    },
    // 搜索接口地址
    getName () {
      this.loading = true
      // 编码模块存在 apiNot 等于 apiAll中包含搜索名称的
      if (this.formList.apiName) {
        this.apiNot = this.apiAll.filter(item => {
          return item.id.indexOf(this.formList.apiName) > -1
        })
        this.loading = false
      } else {
        this.apiNot = this.apiAll
        this.loading = false
      }
    },
    save () {
      this.$emit('powerName', this.apiHave);
    },
    cellAdd (row, column, cell, event) {
      // 如果接口未拥有，添加
      if (!this.apiCheck[row.id]) {
        this.apiCheck[row.id] = row
      }
      // 未拥有接口删除
      this.apiNot = this.apiNot.filter(item => {
        return item.id !== row.id
      })
      this.apiAll = this.apiAll.filter(item => {
        return item.id !== row.id
      })
      // 已拥有接口放入
      this.apiHave.push(row)
    },
    cellRemove (row, column, cell, event) {
      // 拥有接口移除
      this.apiHave = this.apiHave.filter(item => {
        return item.id !== row.id
      })
      // 删除
      delete this.apiCheck[row.id]
      // 重新调用接口查询
      this.getApi()
    }
  },
  computed: {
  }
}
</script>
<style lang='scss' scoped>
</style>
